<template>
    <div class="primary-comment-list">
        <div v-if="PrimaryComments.length != 0" >
                <div  class="primary-comment-box"  @scroll="handleScroll">
                <PRIMARY
                    v-for="comment in PrimaryComments"
                    :key="comment.id"
                    :f_comments="comment"
                    :user="user"
                    @update-comments="deal_new_comment"
                    
                />
                </div>
                <div class="brower-more" ></div>
        </div>
        <div v-else>
            <NOTE :text="'暂无评论~'"/>
        </div>  
    </div>
</template>

<script setup>
import { ref, onMounted ,watch,inject,defineExpose} from 'vue'
import PRIMARY from './primaryitem.vue'
import { get_text_comments_first} from "@/api/community/main.js"
import { customDivision } from "@/static/js/number/division.js"
import { getUniqueItemsFromSecondArray_byId} from "@/static/js/array/concat_two_norepeat.js"
import { success } from '@/static/js/alert'
import NOTE from '@/components/common/interest/notext.vue'
let user = inject("user")()
const communityStore =inject('community')()
let isloading = ref(false)
// 示例数据
const PrimaryComments = ref([
    // {
    //     id: 1,
    //     author: 88888888,
    //     date: '2025-04-08 21:51:39',
    //     images: null,
    //     replay_count: 2,
    //     like_count: 5,
    //     content: '豫章故郡，洪都新府。',
    //     f_username:"张三",
    //     author_image: 'https://via.placeholder.com/50',
    //     uuid: '1234567890'
    // },
    // {
    //     id: 2,
    //     author: 99999999,
    //     date: '2025-04-08 22:15:00',
    //     images: ['https://via.placeholder.com/300'],
    //     replay_count: 1,
    //     like_count: 3,
    //     content: '星分翼轸，地接衡庐。',
    //     f_username: "张三",
    //     author_image: 'https://via.placeholder.com/50',
    //     uuid: '0987654321'
    // }
])
watch(() => PrimaryComments.value, (newRows, old) => {
    isloading.value = false;
    if (newRows.length == old.length) { 
        success("没有更多啦~")
        return
    }
    communityStore.value.set_curent_article_expand_info('PrimaryComments', newRows)
})


const handleScroll = async (event) => { 
    if (isloading.value) return;
    const { scrollTop, clientHeight, scrollHeight } = event.target;
        if (scrollTop + clientHeight + 20 >= scrollHeight) {
        isloading.value = true;
        setTimeout(() => {
            // 认为10s后数据不变就认为数据为空!
        isloading.value = false;
        }, 10000)
            const middle = getUniqueItemsFromSecondArray_byId(
                PrimaryComments.value, 
                await get_text_comments_first(props.article_id,
                     user.value.get_user()?.id,
                     customDivision(PrimaryComments.value.length, 10)
                ),'uuid')
            PrimaryComments.value.push(...middle)
    }
}

const props = defineProps({
    article_id: {
        type: Number,
        required: true
    }
})
const deal_new_comment = (newComment) => {
    PrimaryComments.value.unshift(newComment)
}



onMounted(async () => { 
    const data = await get_text_comments_first(props.article_id,user.value.get_user()?.id)
    PrimaryComments.value = data
    communityStore.value.set_curent_article_expand_info('PrimaryComments', PrimaryComments.value)
    // console.log(PrimaryComments.value)
})
let addComment = (comment) => {
    PrimaryComments.value.unshift(comment)
}
// 为了减少修改直接暴漏多层
defineExpose({
    addComment
})

</script>

<style scoped>
.primary-comment-list {
    margin-top: 20px;
    height: 100%;
}
.primary-comment-box {
    max-height: 600px; 
    overflow-y: auto; 
    
}
.primary-comment-box::-webkit-scrollbar {
    display: none;
}
.brower-more{
    height: 20px;
}
</style>